import React, {useEffect, useState} from 'react'
import {useParams} from "react-router-dom";
import Pagination from '../Pagination/Pagination'
import axios from "axios";

function ModuleUserReviews(params) {
    return <>
        <hr/>
        <span>用户评测</span>
        <div id="review_histograms_container" className="has_data collapsed shadow p-3 mb-5 bg-white rounded">
            {<div className="user_reviews_summary_bar">
                <div className="summary_section">
                    <div className="title">总体评测：</div>
                    <span className="game_review_summary positive h4" style={{color: "rgb(97,192,244)"}}>特别好评</span>
                    <span>(114,514 篇评测)</span>
                </div>
            </div>}
        <hr/>
            {<div className="user_reviews_summary_bar">
                <div className="summary_section">
                    <div className="title">最近评测：</div>
                    <span className="game_review_summary positive h4" style={{color: "rgb(97,192,244)"}}>特别好评</span>
                    <span>(2,024 篇评测)</span>
            </div>
            </div>}
    </div>
    </>
}
export default function CommentPage() {
    return (
        <div className='Comment text-body' style={{textAlign: "left"}}>
            {/*用户评测*/}
            <ModuleUserReviews/>
            <div className='shadow p-3 mb-5 bg-white rounded'>
                <CommentList/>
                {/* 分页 */}
                <Pagination/>
            </div>

        </div>
    )
}

function Comment({comment, indentLevel = 1}) {
    const renderChildren = () => {
        if (comment.children && comment.children.length > 0) {
            return (<div>
                {comment.children.map((childComment) => (
                    <Comment
                        key={childComment.id}
                        comment={childComment}
                        indentLevel={indentLevel + 1} //增加2em缩进
                    />
                ))} </div>);
        }
        return null;
    };

    return (// 根据缩进级别计算 textIndent 的值
        <div class="rightcol " style={{marginBottom: 10, textIndent: `${indentLevel}em`}}>
            <div className='user' style={{backgroundColor: "rgb(165,201,222)", height: 50 + "px"}}>
                <span> <img title='' alt='' src="/img/imgUser.webp"/> <span
                    className='h4'>用户ID：{comment.username}</span> </span>
                <div class="thumb" style={{float: "right"}}> {/* 好评或者差评 */}
                    <img title='' alt='' src={true ? "/img/icon_thumbsUp_v6.png" : "/img/thumbs_upselected.png"}/>
                    <span>{true ? "推荐" : "不推荐"}</span>
                    <img title='' alt='' style={{float: "right"}} src="/img/icon_review_counted.png"/>
                </div>
            </div>
            <div class="content h6"
                 style={{minHeight: 30 + "px"}}>{comment.id}楼：{comment.pid === 0 ? "" : "回复@" + comment.pid + "楼"} {comment.plContent}
                <br/></div>
            <div class="postedDate text-black-50" style={{fontSize: 14, height: 20 + "px"}}>
                <span style={{float: "right"}}>发布于：{comment.created.substring(0, 16)} </span>
                <span style={{float: "right"}}>ip：{comment.ip}</span>
            </div>
            <br/>
            {renderChildren()}
        </div>
    )
}


// 父组件，用来渲染初始的评论数据
export function CommentList() {
    const params = useParams()
    const [data, setData] = useState([]);
    const [error, setError] = useState(null);
    useEffect(() => {
        axios
            .get(`http://localhost:8091/back-article-comment/articleIdCommentPidAll?articleId=`+ params.id )
            .then((response) => {
                console.log(response.data.data)
                setData(response.data.data);
                setError(null);
            })
            .catch((error) => {
                console.log(error)
            });
    }, []); // 空的依赖数组意味着这个effect只会在组件挂载时运行
    // 使用数据渲染组件
    return (
        <div className="comment-list">
            {data.map((comment) => (
                <div><Comment key={comment.id} comment={comment}/>
                    <hr/>
                    <div class="control_block">
                        <span class="text review_was_helpful h6">这篇评测是否有价值？</span>
                        <div class="vote_button_ctn" id="reviewButtonContainer162919185">
                            <button type="button" class="btn btn-outline-primary"><span>是</span></button>
                            <button type="button" class="btn btn-outline-primary"><span>否</span></button>
                            <button type="button" class="btn btn-outline-primary"><span>欢乐</span></button>
                            <button type="button" class="btn btn-outline-primary" onClick={()=>{
                                axios.get(`http://localhost:8091/user/RewardMoney?id=${JSON.parse(localStorage.getItem("userDTOId")).id}&pId=${comment.userId}`)
                                    .then((response) => {
                                        console.log(response.data);
                                        alert("成功打赏对方10元")
                                    })
                                    .catch(error => {
                                        alert("打赏失败")
                                    }, []);
                            }}><span> <img title='' alt='' src="/img/award_icon.svg" class="reward_btn_icon"/> 奖励</span>
                            </button>
                        </div>
                    </div>
                    <div class="vote_info h6 text-black-50">
                        <div>有 144 人觉得这篇评测有价值</div>
                        {/*<div class="commentCount" style={{float: 'right', cursor: "pointer"}}> 点击查看回复</div>*/}
                        <div>有 244 人觉得这篇评测很欢乐</div>
                        <div style={{height: 15, backgroundColor: "rgb(239,240,241)"}}></div>
                    </div>
                </div>
            ))}
        </div>
    );
}
